import {FileOutlined} from '@ant-design/icons';
import {Descriptions, DescriptionsProps, Divider} from 'antd';
import React from 'react';
import moment from "moment";

interface Props {
  data: API.CommentResult[];
}

/**
 * 模型配置
 * @constructor
 */
const ModelConfig: React.FC<Props> = (props) => {
  const { data } = props;

  const modelListView = (models?: API.CommentResult[]) => {
    if (!models) {
      return <></>;
    }
    return (
      <>
        {models.map((model, index) => {
          const modelItems: DescriptionsProps['items'] = [
            {
              key: 'username',
              label: '用户名称',
              children: <p>{model.username}</p>,
            },
            {
              key: 'data',
              label: '创建时间',
              children: <p>{moment(model.createTime).fromNow()}</p>,
            },
            {
              key: 'description',
              label: '描述',
              children: <p>{model.commentDescription}</p>,
            },
          ];

          return (
            <>
              <Descriptions column={2} key={index} items={modelItems} />
              <Divider />
            </>
          );
        })}
      </>
    );
  };

  return (
    <div>
      <Descriptions
        title={
          <>
            <FileOutlined /> 评论列表
          </>
        }
      />
      {modelListView(data)}
    </div>
  );
};

export default ModelConfig;
